<template>
<f7-app :params="f7params" >

  <!-- Left panel with cover effect-->
  <f7-panel left cover theme-dark>
    <f7-view>
      <f7-page>
        <f7-navbar title="Left Panel"></f7-navbar>
        <f7-block>Left panel content goes here</f7-block>
      </f7-page>
    </f7-view>
  </f7-panel>


  <!-- Right panel with reveal effect-->
  <f7-panel right reveal theme-dark>
    <f7-view>
      <f7-page>
        <f7-navbar title="Right Panel"></f7-navbar>
        <f7-block>Right panel content goes here</f7-block>
      </f7-page>
    </f7-view>
  </f7-panel>


  <!-- Your main view, should have "view-main" class -->
  <f7-view main class="safe-areas" url="/"></f7-view>


  <!-- Popup -->
  <f7-popup id="my-popup">
    <f7-view>
      <f7-page>
        <f7-navbar title="Popup">
          <f7-nav-right>
            <f7-link popup-close>Close</f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-block>
          <p>Popup content goes here.</p>
        </f7-block>
      </f7-page>
    </f7-view>
  </f7-popup>

  <f7-login-screen :opened="!$store.getters.token">
    <f7-view url="/Login/">

    </f7-view>
  </f7-login-screen>
</f7-app>
</template>
<script>

  import routes from '../js/routes.js';
  import { getToken } from "../utils/auth";

  export default {
    data() {
      return {
        // Framework7 Parameters
        f7params: {
          name: '5g', // App name
          theme: 'ios', // Automatic theme detection

          view: {
            stackPages: true,  //缓存页面
            iosSwipeBack:true,
            iosDynamicNavbar: false,  //禁用ios动态导航栏~
            pushState: true,
            // pushStateRoot: '/',
            pushStateOnLoad: false
          },
          // App routes
          routes: routes,
        },

        // Login screen data
        username: '',
        password: '',
      }
    },
    methods: {
      alertLoginData() {
        this.$f7.dialog.alert('Username: ' + this.username + '<br>Password: ' + this.password, () => {
          this.$f7.loginScreen.close();
        });
      }
    },
    mounted() {
      if (getToken()) {
        this.$store.dispatch('GetInfo').then(res => {
          if(res.user.activation=== '0') {
            this.$dialog.confirm({
              title: '提示',
              message: '当前账号未激活，是否前往激活',
              confirmButtonText: '去激活'
            }).then(() => {
              this.$f7.views.main.router.navigate('/active/');
              // on confirm
            }).catch(() => {
              // on cancel
            });
          }
        });
      }
      this.$f7ready((f7) => {
        location.hash = '';
        // Call F7 APIs here
      });
    }
  }
</script>